<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		
		<style type="text/css" media="screen">
			@import "tristate.css";
			
			* { margin: 0; padding: 0; }
			body { background: #fff; font: 12px Arial, Helvetica, sans-serif; padding: 20px; }
			h1 { margin: 0 0 20px 0; }
		</style>
	
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.tristate.min.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$('ul.triState','').tristate({
						heading: 'h3'
				});
			});
		</script>
	</head>
	
	<body>
		<h1>Tristate Checkbox Example</h1>
		
		<ul class="triState">
			<li><h3>Header 1</h3>
				<ul>
					<li><input type="checkbox" name="cboxA01" value="yes" /><a href="#" class="label">Item 01</a></li>
					<li><input type="checkbox" name="cboxA02" value="yes" /><a href="#" class="label">Item 02</a>
						<ul>
							<li><h3>Header 2</h3>
								<ul>
									<li><input type="checkbox" name="cboxA04" value="yes" /><a href="#" class="label">Item 04</a></li>
									<li><input type="checkbox" name="cboxA05" value="yes" /><a href="#" class="label">Item 05</a></li>
									<li><input type="checkbox" name="cboxA06" value="yes" /><a href="#" class="label">Item 06</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><input type="checkbox" name="cboxA03" value="yes" /><a href="#" class="label">Item 03</a></li>
				</ul>
			</li>
		</ul>
	
	</body>
</html>
